<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
    >
      <el-row>
        <el-col :span="24" style="text-align:left;margin:0 0 20px 20px">
          <span
            ><span style="color:red">*</span>表单内细信息
            会提交到不动产,请确认核实后提交</span
          >
        </el-col>
        <el-col :span="12">
          <el-form-item label="借款人姓名" prop="jkr_name">
            <el-input
              v-model="ruleForm.jkr_name"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="借款人身份证" prop="jkr_id_car">
            <el-input
              v-model="ruleForm.jkr_id_car"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="借款人电话" prop="jkr_phone">
            <el-input
              v-model="ruleForm.jkr_phone"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="联系地址" prop="jkr_attr">
            <el-input
              v-model="ruleForm.jkr_attr"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="工作单位" prop="jkr_comp">
            <el-input
              v-model="ruleForm.jkr_comp"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="渠道联系人" prop="qd_name">
            <el-input
              v-model="ruleForm.qd_name"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="渠道联系电话" prop="qd_phone">
            <el-input
              v-model="ruleForm.qd_phone"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="配偶姓名" prop="po_name">
            <el-input
              v-model="ruleForm.po_name"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="配偶身份证" prop="po_id_car">
            <el-input
              v-model="ruleForm.po_id_car"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="配偶电话" prop="po_phone">
            <el-input
              v-model="ruleForm.po_phone"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="配偶工作单位" prop="po_comp">
            <el-input
              v-model="ruleForm.po_comp"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="配偶联系地址" prop="po_attr">
            <el-input
              v-model="ruleForm.po_attr"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="贷款银行" prop="loan_bank">
            <el-input
              v-model="ruleForm.loan_bank"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="抵押人姓名" prop="dyr_name">
            <el-input
              v-model="ruleForm.dyr_name"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="抵押人身份证" prop="dyr_id_car">
            <el-input
              v-model="ruleForm.dyr_id_car"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="抵押人电话" prop="dyr_phone">
            <el-input
              v-model="ruleForm.dyr_phone"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="产权号" prop="house_num">
            <el-input
              v-model="ruleForm.house_num"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="房屋地址" prop="house_attr">
            <el-input
              v-model="ruleForm.house_attr"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="房屋面积" prop="house_size">
            <el-input
              v-model="ruleForm.house_size"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="所在区域" prop="house_area">
            <el-input
              v-model="ruleForm.house_area"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="楼盘名称" prop="house_lp">
            <el-input
              v-model="ruleForm.house_lp"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="subimFun">确 定</el-button>
    </span>
  </div>
</template>
<script>
import { getXhphTable, getXhphAdd } from "../../../src/assets/js/api";
export default {
  name: "BdcDialog",
  props: ["isBdc", "orderNumber"],
  data() {
    return {
      dialogVisible: false,
      ruleForm: {
        jkr_name: "",
        jkr_id_car: "",
        jkr_phone: "",
        jkr_attr: "",
        jkr_comp: "",
        qd_name: "",
        qd_phone: "",
        po_name: "",
        po_id_car: "",
        po_phone: "",
        po_comp: "",
        po_attr: "",
        loan_bank: "",
        dyr_name: "",
        dyr_id_car: "",
        dyr_phone: "",
        house_num: "",
        house_attr: "",
        house_size: "",
        house_area: "",
        house_lp: ""
      },
      rules: {
        jkr_name: [
          { required: true, message: "请输入借款人姓名", trigger: "blur" }
        ],
        jkr_id_car: [
          { required: true, message: "请输入借款人身份证", trigger: "blur" },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "请填写正确的身份证号码",
            trigger: "blur"
          }
        ],
        // jkr_phone: [
        //   { required: true, message: "请输入借款人电话", trigger: "blur" },
        //   {
        //     pattern: /^1[23456789]\d{9}$/,
        //     message: "请填写正确的手机号码",
        //     trigger: "blur"
        //   }
        // ],
        jkr_attr: [
          { required: true, message: "请输入借款人联系地址", trigger: "blur" }
        ],
        dyr_name: [
          { required: true, message: "请输入抵押人姓名", trigger: "blur" }
        ],
        dyr_id_car: [
          { required: true, message: "请输入抵押人身份证", trigger: "blur" },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "请填写正确的身份证号码",
            trigger: "blur"
          }
        ],
        // dyr_phone: [
        //   { required: true, message: "请输入抵押人电话", trigger: "blur" },
        //   {
        //     pattern: /^1[2345789]\d{9}$/,
        //     message: "请填写正确的手机号码",
        //     trigger: "blur"
        //   }
        // ],
        house_num: [
          { required: true, message: "请输入产权证号", trigger: "blur" }
        ],
        house_attr: [
          { required: true, message: "请输入房屋地址", trigger: "blur" }
        ],
        house_size: [
          { required: true, message: "请输入房屋面积", trigger: "blur" }
        ],
        house_area: [
          { required: true, message: "请输入所在区域", trigger: "blur" }
        ],
        house_lp: [
          { required: true, message: "请输入楼盘名称", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getXhphTable(this.orderNumber).then(res => {
        this.ruleForm = res.data;
        this.$delete(this.ruleForm, "id");
      });
    },
    subimFun() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let data = {};
          data.orderNumber = this.orderNumber;
          data.table = this.ruleForm;
          getXhphAdd(data).then(res => {
            if (res.code == 200) {
              this.$emit("dialogCloes");
              this.$refs.ruleForm.resetFields();
              this.$message.success(res.message);
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    closeFun(data) {
      if (data == true) {
        this.$refs.ruleForm.resetFields();
      }
    }
  }
};
</script>
